<template>
    <div class="page-change-price">
        <div class="main">
            <div class="input-box">
                <div class="label">¥</div>
                <input class="input" type="digit" v-model.trim="tempPrice" placeholder="输入修改后的价格">
            </div>
            <div class="old-price text-right">当前价格  {{price}}元</div>
            <div class="btn btn-mobile btn-large btn-block btn-blue-white" @click="onClickSure">
                确认修改
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import { Component, Vue } from 'vue-property-decorator';

// 修改价格
@Component({
    name: 'ChangePrice',
})
export default class ChangePrice extends Vue {
    public tempPrice = '';

    public get pkgId() {
        return this.$route.query.pkg_id;
    }
    public get orderId() {
        return this.$route.query.order_id;
    }
    public get price() {
        return decodeURIComponent(this.$route.query.price as string);
    }
    public get isPrepay() {
        return this.$route.query.isPrepay === 'true';
    }

    public async onClickSure() {
        if (!this.tempPrice) {
            wx.showToast({
                icon: 'none',
                title: '请输入金额',
            });
            return;
        }

        const res = await store.dispatch('manage/changePrice', {
            orderId: this.orderId,
            price: Math.floor(parseFloat(this.tempPrice) * 100),
            isPrepay: this.isPrepay,
        });
        if (res.statusCode === 200 && res.data.status === 0) {
            wx.navigateBack();
        } else {
            wx.showToast({
                title: res.message,
                icon: 'none',
            });
        }
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-change-price {
    .main {
        padding: 10px 40rpx;
        .input-box {
            display: flex;
            padding: 10px 0;
            border-bottom: 2rpx solid #bbbbbb;
            font-size: 40rpx;
            .label {
                margin-right: 10px;
            }
            .input {
                flex: 1;
                vertical-align: middle;
            }
        }
        .old-price {
            margin-top: 10px;
            margin-bottom: 106rpx;
        }
    }
}

</style>
